<#include "/common/cy.html" /> <@layout>
<head>

</head>
<style>
html,body {
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
}

html,body {
	margin: 0;
	border: 0 none;
	padding: 0;
}

body {
	font-size: 1em;
	font-family: "Microsoft Yahei", "黑体", monospace;
}

.title,.content p {
	display: none;
	color: #2ae0c8;
}
</style>
<style>
.swiper-container,.swiper-slide {
	width: 100%;
	height: 100%;
}
</style>
<script>

$(function(){
	$("#end").hide();
	var x = document.getElementById("audios");
	x.play();
  var mySwiper = $('.swiper-container').swiper({
    mode:'vertical',
    loop: true,
		mousewheelControl:true,
		keyboardControl:true,
		onSlideChangeStart:function(){
		},
		onSlideChangeEnd:function(swiper){
		
/* 	$('.content p').each($).show(1000).wait(1600);
 */	},
		onSwiperCreated:function(){
	//	$('.title').wait(500).slideDown().delay(500).animate({fontSize:"250%",color:"red",display:"block"},3000,"swing");
//$('.text p').each($).show(1000).wait(1600);
		}
    
  });
 

})
function openaudio(){
	var x = document.getElementById("audios");
	x.play();
	$("#end").show();
	$("#start").hide();
}
function end(){
	var x = document.getElementById("audios");
	x.pause();
	$("#end").hide();
	$("#start").show();
}
</script>
<body>
<header class="app-header" >
		<a href="#"  id="start" onclick="openaudio();" class="u-globalAudio z-pause" style="left:10%">
		<i class="icon-pause"></i></a>
		<a href="#"  id="end" onclick="end();" class="u-globalAudio z-pause"  style="left:10%">
		<i class="icon-forward"></i></a>
		<#if musicurl ??>
		<audio src="${ctx}${(musicurl)!}" id="audios" autoplay="autoplay" loop="loop"></audio>
		<#else>
		<#list mblist as m>
		<audio src="${ctx}${(m.music)!}" id="audios" autoplay="autoplay" loop="loop"></audio>
		</#list>
		</#if>
		<span class=""></span>
		<div class="coffee-steam-box"
		 style="height: 100px; width: 50px; left: 36px; top: -50px; position: absolute; overflow: hidden; z-index: 0;"></div>
	</header>
	<div class="swiper-container">
		<!-- 滑动操作指示 -->
		<!-- 主体 -->
		<div class="swiper-wrapper">
		<#list mbsxlist as m>
			<div class="swiper-slide slide${m_index+1}"
				style="background: url('') no-repeat center center;
				 background-color: white; background-size: 100% 100%;">
				 <#if (contlist?size>0)>
				<#list contlist as s>
				<#if  (m.id)?string ==(s.mbsxid)>
				<div class="${(s.tx)!}" id="imgdiv${(m.id)}"
					style="<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
					<img  id="urls${(m.id)}"
						src="${ctx}${(s.url)!}" 
						style="width: 100%; height: 100%;" />
				</div>
				<div class="${(s.tx)!}" id="nrs${(m.id)}"
					style="font-size:25px;color:${(s.color)!};  
					<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
					</br>${(s.nr)!}
				</div>
				<#else>
				<div class="${(m.tx)!}" id="imgdiv${(m.id)}"
					style="<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
					<img  id="urls${(m.id)}"
						src="${ctx}${(m.url)!}" 
						style="width: 100%; height: 100%;" />
				</div>
				<div class="${(m.tx)!}" id="nrs${(m.id)}"
					style="font-size:25px;color:${(m.color)!};  
					<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
				</div>
				</#if>
				</#list>
				<#else>
				<div class="${(m.tx)!}" id="imgdiv${(m.id)}"
					style="<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
					<img  id="urls${(m.id)}"
						src="${ctx}${(m.url)!}" 
						style="width: 100%; height: 100%;" />
				</div>
				<div class="${(m.tx)!}" id="nrs${(m.id)}"
					style="font-size:25px;color:${(m.color)!};  
					<#if (m.mbbh=="1")>	height:100%;width :100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="2")>	height: 70%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="3")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>
						<#if (m.mbbh=="4")>	height: 100%;width : 100%;left : 0px;top : 70%;</#if>
						<#if (m.mbbh=="5")>	height: 100%;width : 100%;left : 0px;top : 0px;</#if>" ">
				</div>
				</#if>
			</div>
			</#list>
		</div>
	</div>
</body>
<#include "/common/cyend.html" /> 
<script>

var imgUrl = '${(pic)!}';
var lineLink = '${(url)!}wxContent/view/${(id)!}';
var descContent =  '${(descContent)!}';
var shareTitle = '${(title)!}';
var appid = '${(AppId)!}';

function shareFriend() {
	WeixinJSBridge.invoke('sendAppMessage', {
		"appid" : appid,
		"img_url" : imgUrl,
		"img_width" : "640",
		"img_height" : "640",
		"link" : lineLink,
		"desc" : descContent,
		"title" : shareTitle
	}, function(res) {
		_report('send_msg', res.err_msg);
	})
}
function shareTimeline() {
	WeixinJSBridge.invoke('shareTimeline', {
		"img_url" : imgUrl,
		"img_width" : "640",
		"img_height" : "640",
		"link" : lineLink,
		"desc" : descContent,
		"title" : shareTitle
	}, function(res) {
		_report('timeline', res.err_msg);
	});
}
function shareWeibo() {
	WeixinJSBridge.invoke('shareWeibo', {
		"content" : descContent,
		"url" : lineLink,
	}, function(res) {
		_report('weibo', res.err_msg);
	});
}
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
	// 发送给好友
	WeixinJSBridge.on('menu:share:appmessage', function(argv) {
		shareFriend();
	});

	// 分享到朋友圈
	WeixinJSBridge.on('menu:share:timeline', function(argv) {
		shareTimeline();
	});

	// 分享到微博
	WeixinJSBridge.on('menu:share:weibo', function(argv) {
		shareWeibo();
	});
}, false);


</script>

</@layout>
